<template>
  <div class="vue-container">
    <el-form
      ref="reform"
      v-loading="loading"
      style="width: 600px;"
      :model="ruleForm"
      status-icon
      :rules="rules"
      :size="size"
      label-width="90px"
      :show-message="showMessage"
      element-loading-background="rgba(255, 255, 255, 0.8)"
      element-loading-text="数据正在加载中"
      element-loading-spinner="el-icon-loading"
    >
      <el-form-item v-for="(item, index) in data" :key="index" :label="item.name" :prop="item.code">
        <el-input
          v-model.trim="ruleForm[item.code]"
          :placeholder="item.placeholder"
          type="text"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
        <el-button v-throttle :loading="loading" type="primary" @click="submitForm">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { templateList, templateSave, templateReset } from '@/api/system/sys-config'
export default {
  name: 'SysConfigTemplate',
  data() {
    return {
      loading: false,
      // 是否显示校验信息
      showMessage: false,
      data: {}, // 列表数据
      // 表单校验
      rules: {},
      ruleForm: {}
    }
  },
  computed: {
    // 页面布局大小
    size() {
      return this.$store.state.app.size
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    getList() {
      this.loading = true
      const queryForm = { domainId: this.$route.query.domainId }
      templateList(queryForm).then((res) => {
        this.data = res.data
        const ruleForm = {}
        res.data.forEach(item => {
          ruleForm[item.code] = item.value
          if (item.required === 1) {
            this.rules[item.code] = [
              { required: true, message: item.message, trigger: 'blur' }
            ]
          }
        })
        this.ruleForm = ruleForm
      }).finally(() => {
        this.loading = false
      })
    },
    // 重置
    reset() {
      this.$confirm('此操作将重置当前配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        templateReset(this.$route.query.domainId).then(() => {
          this.$message({ type: 'success', message: '重置成功!' })
          this.getList()
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {})
    },
    // 保存
    submitForm() {
      this.$refs['reform'].validate((valid, obj) => {
        if (valid) {
          for (let i = 0; i < this.data.length; i++) {
            this.data[i].value = this.ruleForm[this.data[i].code]
            this.data[i].sort = i
          }
          this.loading = true
          templateSave(this.data).then((res) => {
            this.$message({ message: '保存成功', type: 'success' })
          }).finally(() => {
            this.loading = false
          })
        } else {
          const field = []
          for (const key in obj) {
            field.push(obj[key][0].message)
          }
          this.$message.error(field[0])
          return false
        }
      })
    }
  }
}
</script>
